<!-- 自定义底部导航栏 -->
<template>
	<view class="custom-tabbar">
		<!-- 底部 固定存在的 -->
		<view class="tab-item" :class="{ 'tab-Active': counterStore.menuActive == 'index'}" @click="switchTab('index')">
			<view class="tab-td-one">
				<uni-icons class="tab-icon" type="auth-filled" size="24" color="#8a8a8a"></uni-icons>
			</view>
			<view class="tab-td-two">
				<p class="tab-Title">首页</p>
			</view>
		</view>
		<view class="tab-item" :class="{ 'tab-Active': counterStore.menuActive == 'me'}" @click="switchTab('me')">
			<view class="tab-td-one">
				<uni-icons class="tab-icon" type="notification-filled" size="24" color="#8a8a8a"></uni-icons>
			</view>
			<view class="tab-td-two">
				<p class="tab-Title">我的</p>
			</view>
		</view>
	</view>
</template>

<script setup name="customTabbar">
	import { useCounterStore } from '@/stores/counter.js' //需要引入store
	
	const counterStore = useCounterStore()
	console.log(counterStore.menuActive) // 访问menuActive状态
	
	
	// 切换菜单
	function switchTab(val) {
		counterStore.menuActive = val
		// uni.navigateTo({
		// 	url: `/pages/message/index`
		// })
	}
	
</script>

<style lang="scss" scoped>
	.custom-tabbar {
		width: 100%;
		height: 40px;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ebedf0db;
		padding: 8px 0;
		
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* 其他样式 */
	}

	.tab-item {
		flex: 1;
		text-align: center;
		/* 样式 */
	}
	
	.tab-td-one{
		height: 24px;
	}

	.tab-td-two{
		height: 16px;
		display: grid;
		padding: 0 8px;
	}
	
	.tab-icon {
		/* 图标样式 */
		font-size: 22px;
		color: #8a8a8a;
	}
	
	.tab-Title{
		color: #8a8a8a;
		font-size: 10px;
		line-height: 16px;
	}
	
	.tab-Active{
		.tab-td-one{
			.tab-icon{
				color: #47a347 !important;
			}
		}
		.tab-td-two{
			.tab-Title{
				color: #47a347 !important;
			}
		}
	}
	.view-text{
	  /**
		思路：
		1.设置inline-block属相
		2.强制不换行
		3.固定宽度
		4.隐藏超出部分
		5.显示“……”
	  */
	  display: inline-block;
	  white-space: nowrap; 
	  width: 100%; 
	  overflow: hidden;
	  text-overflow:ellipsis;
	}
</style>